<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Menu Static Test : Default</title>
<link rel="stylesheet" href="../static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css"
	type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css"
	type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.8.2.js"></script>
<script type="text/javascript" src="../static.js"></script>

<script src="http://jqueryui.com/themeroller/themeswitchertool/"
	type="text/javascript"></script>
<script>
	$(document).ready(function(){
		$('#switcher').themeswitcher();
	});
	</script>



<style type="text/css">
/* styles for this page only */
.ui-menu {
	width: 200px;
}

#flyout .ui-menu {
	position: relative;
}

#flyout .ui-menu.ui-menu-icons {
	position: absolute;
}

.ui-menu.ui-menu-icons {
	position: relative;
}

.ui-menu.ui-menu-icons .ui-menu-item a {
	position: relative;
	padding-left: 2em;
}

/* left-aligned icon */
.ui-menu .ui-icon {
	position: absolute;
	top: .2em;
	left: .2em;
}

/* right-aligned icon */
.ui-menu .ui-icon.ui-menu-icon {
	position: static;
	float: right;
}
</style>

</head>
<body>

	<div id="switcher" style="position: absolute; top: 20px; right: 20px;"></div>


	<!-- NOTES:

* Added "ui-menu-icons" class to set a left indent value for all menu items in a single menu 

-->


	<h2>Default</h2>

	<ul role="menu" aria-activedescendant="ui-active-menuitem"
		class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-bottom">
		<li class="ui-menu-item" role="menuitem"><a href="#"
			tabindex="-1" class="ui-corner-all"><span
				class="ui-icon ui-icon-print"></span>Aberdeen</a></li>
		<li class="ui-menu-item" role="menuitem" id="ui-active-menuitem"><a
			href="#" tabindex="-1" class="ui-state-hover ui-corner-all">Ada</a></li>
		<li class="ui-menu-item" role="menuitem"><a href="#"
			tabindex="-1" class="ui-corner-all">Adamsville</a></li>
		<li class="ui-menu-item" role="menuitem"><a href="#"
			tabindex="-1" class="ui-corner-all"><span
				class="ui-icon ui-icon-scissors"></span>Addyston really long menu
				option to show wrap</a></li>
		<li class="ui-menu-item" role="menuitem"><a href="#"
			tabindex="-1" class="ui-corner-all"><span
				class="ui-icon ui-icon-wrench"></span>Adelphi</a></li>
		<li class="ui-menu-item" role="menuitem"><a href="#"
			tabindex="-1" class="ui-corner-all"><span
				class="ui-icon ui-icon-star"></span>Adena</a></li>
		<li class="ui-menu-item" role="menuitem"><a href="#"
			tabindex="-1" class="ui-corner-all">Adrian</a></li>
		<li class="ui-menu-item" role="menuitem"><a href="#"
			tabindex="-1" class="ui-corner-all">Akron</a></li>
		<li class="ui-menu-item" role="menuitem"><a href="#"
			tabindex="-1" class="ui-corner-all">Albany</a></li>
	</ul>

	<br />
	<br />

	<div id="drilldown">

		<h2>Drilldown</h2>

		<ul role="listbox" aria-activedescendant="ui-active-menuitem"
			class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
			<li role="menuitem" class="ui-menu-item"><a href="#"
				tabindex="-1" class="ui-state-hover ui-corner-all"><span
					class="ui-icon ui-icon-print"></span><span
					class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Amsterdam</a>
				<ul aria-activedescendant="ui-active-menuitem" role="listbox"
					class="ui-menu ui-widget ui-widget-content ui-corner-all"
					style="display: none;">
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Aberdeen</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Ada</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#"><span
							class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a>
						<ul aria-activedescendant="ui-active-menuitem" role="listbox"
							class="ui-menu ui-widget ui-widget-content ui-corner-all"
							style="display: none;">
							<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
								class="ui-corner-all" href="#">Anaheim</a></li>
							<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
								class="ui-corner-all" href="#"><span
									class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Cologne</a>
								<ul aria-activedescendant="ui-active-menuitem" role="listbox"
									class="ui-menu ui-widget ui-widget-content ui-corner-all"
									style="display: none;">
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mberdeen</a></li>
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mda</a></li>
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mdamsville</a></li>
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mddyston</a></li>
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mmesville</a></li>
								</ul></li>
							<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
								class="ui-corner-all" href="#">Frankfurt</a></li>
						</ul></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Addyston</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Amesville</a></li>
				</ul></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span
					class="ui-icon ui-icon-star"></span>Anaheim</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span
					class="ui-icon ui-icon-heart"></span>Cologne</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span class="ui-icon ui-icon-key"></span>Frankfurt</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span
					class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a>
				<ul aria-activedescendant="ui-active-menuitem" role="listbox"
					class="ui-menu ui-widget ui-widget-content ui-corner-all"
					style="display: none;">
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mberdeen</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mda</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mdamsville</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mddyston</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mmesville</a></li>
				</ul></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#">Munich</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#">Utrecht</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#">Zurich</a></li>
		</ul>

	</div>

	<br />
	<br />

	<div id="flyout">

		<h2>Flyout / nested</h2>

		<ul aria-activedescendant="ui-active-menuitem" role="listbox"
			class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all"
			id="menu">
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span
					class="ui-icon ui-icon-scissors"></span>Amsterdam</a>
				<ul style="display: block; top: 88.5px; left: 205px;"
					aria-activedescendant="ui-active-menuitem" role="listbox"
					class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Aberdeen</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Ada</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-state-active ui-corner-all" href="#"><span
							class="ui-icon ui-icon-print"></span><span
							class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Adamsville</a>
						<ul style="display: block; top: 73px; left: -11px; z-index: 9999;"
							aria-activedescendant="ui-active-menuitem" role="listbox"
							class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
							<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
								class="ui-corner-all" href="#">Anaheim</a></li>
							<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
								class="ui-corner-all" href="#">Cologne</a>
								<ul style="display: none;"
									aria-activedescendant="ui-active-menuitem" role="listbox"
									class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mberdeen</a></li>
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mda</a></li>
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mdamsville</a></li>
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mddyston</a></li>
									<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
										class="ui-corner-all" href="#">Mmesville</a></li>
								</ul></li>
							<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
								class="ui-state-hover ui-corner-all" href="#">Frankfurt</a></li>
						</ul></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Addyston</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Amesville</a></li>
				</ul></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#">Anaheim</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span
					class="ui-icon ui-icon-pencil"></span>Cologne</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span
					class="ui-icon ui-icon-clock"></span>Frankfurt</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-state-active ui-corner-all" href="#"><span
					class="ui-icon ui-icon-print"></span><span
					class="ui-icon ui-menu-icon ui-icon-carat-1-e"></span>Magdeburg</a>
				<ul style="display: none;"
					aria-activedescendant="ui-active-menuitem" role="listbox"
					class="ui-menu ui-menu-icons ui-widget ui-widget-content ui-corner-all">
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mberdeen</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mda</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mdamsville</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mddyston</a></li>
					<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
						class="ui-corner-all" href="#">Mmesville</a></li>
				</ul></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span
					class="ui-icon ui-icon-lightbulb"></span>Munich</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#"><span
					class="ui-icon ui-icon-clipboard"></span>Utrecht</a></li>
			<li role="menuitem" class="ui-menu-item"><a tabindex="-1"
				class="ui-corner-all" href="#">Zurich</a></li>
		</ul>

	</div>


</body>
</html>
